<!--

  进件组件： 
  由各个进件接口来引入该组件。 
  总共分为5个步骤 即 5个FORM  5个step 

不同接口可针对每个step增加定制化字段，  支持每个step覆写 rule规则

提示： 如果有接口内容较少，或者改动较大， 建议直接全部重写，而不是引入该组件！  
 --->

<template>
  <div class="jeepay-m-center" style="margin-top: 20px; margin-left: 20px;">
    <a-steps v-show="props.showStyle == showStyleEnum.step" :current="vdata.currentStep - 1" type="navigation">
      <a-step title="选择所属行业和基础信息" />
      <a-step title="录入经营信息" />
      <a-step title="上传经营证件" />
      <a-step title="填写结算账号" />
      <a-step title="选择签约产品及费率配置" />
    </a-steps>
    
    <!-- 1. 选择所属行业和基础信息  -->

    <a-divider v-if="props.showStyle == showStyleEnum.block" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">选择所属行业和基础信息</a-divider>
    <a-form
      v-show="props.showStyle == showStyleEnum.block || vdata.currentStep == 1"
      ref="stepForm1Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step1Rules"
    >
      <a-form-item v-if="vdata.hideItem.indexOf('merchantType') < 0 " label="选择商户类型" name="merchantType">
        <a-radio-group v-model:value="applymentDetailInfo.merchantType" :disabled="isView" @change="changeEvent.merchantTypeChange(vdata)">
          <a-radio :value="1">个人</a-radio>
          <a-radio :value="2">个体工商户</a-radio>
          <a-radio :value="3">企业</a-radio>
          <!-- <a-radio :value="4">党政、机关及事业单位</a-radio>
          <a-radio :value="5">其他组织</a-radio> -->
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('mccCode') < 0 " label="选择行业MCC" name="mccCode">
        <JeepayMccSelect v-model:value="applymentDetailInfo.mccCode" :disabled="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('loginAccount') < 0 " label="注册账号" name="loginAccount">
        <a-input v-model:value="applymentDetailInfo.loginAccount" :readonly="isView" />
        <span class="jeepay-tip-text">手机号或邮箱，不可重复</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('contactName') < 0 " label="商户联系人姓名" name="contactName">
        <a-input v-model:value="applymentDetailInfo.contactName" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('contactPhone') < 0 " label="商户联系人电话" name="contactPhone">
        <a-input v-model:value="applymentDetailInfo.contactPhone" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('contactEmail') < 0 " label="商户联系人邮箱" name="contactEmail">
        <a-input v-model:value="applymentDetailInfo.contactEmail" :readonly="isView" />
      </a-form-item>


      <a-card v-show="typeof(applymentDetailInfo.contactName) != 'undefined' && typeof(applymentDetailInfo.idcardName) != 'undefined' && applymentDetailInfo.contactName != applymentDetailInfo.idcardName" class="jeepay-card-sheng" title="联系人证件信息（当联系人与法人不是同一人时必填以下信息）" style="margin:35px;">
        <div style=" padding:20px">
          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcard1Img') < 0 " label="商户联系人身份证人像面照片" name="contactIdcard1Img">
            <JeepayUpload v-model:src="applymentDetailInfo.contactIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFuncByContact" />
            <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcard2Img') < 0 " label="商户联系人身份证国徽面照片" name="contactIdcard2Img">
            <JeepayUpload v-model:src="applymentDetailInfo.contactIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFuncByContact" />
            <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
          </a-form-item>


          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcardNo') < 0 " label="商户联系人身份证号" name="contactIdcardNo">
            <a-input v-model:value="applymentDetailInfo.contactIdcardNo" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcardEffectBegin') < 0 " label="商户联系人身份证起始有效期" name="contactIdcardEffectBegin">
            <a-input v-model:value="applymentDetailInfo.contactIdcardEffectBegin" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcardEffectEnd') < 0 " class="jeepay-valid" label="商户联系人身份证结束有效期" name="contactIdcardEffectEnd">
            <a-input v-model:value="applymentDetailInfo.contactIdcardEffectEnd" :readonly="isView" :disabled="applymentDetailInfo.contactIdcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
            <a-checkbox :disabled="isView" :checked="applymentDetailInfo.contactIdcardEffectEnd == '长期' " @change="(e : any) => applymentDetailInfo.contactIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('contactIdcardAddress') < 0 " label="商户联系人身份证居住地址" name="contactIdcardAddress">
            <a-input v-model:value="applymentDetailInfo.contactIdcardAddress" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('contactWxAuthImg') < 0 " label="《业务办理授权函》图片" name="contactWxAuthImg">
            <JeepayUpload v-model:src="applymentDetailInfo.contactWxAuthImg" bizType="applyment" />
            <span class="jeepay-tip-text">当联系人与法人不是同一人时必需上传授权函图片<a href="https://kf.qq.com/faq/220509Y3Yvym220509fQvYR7.html" target="_blank">（《业务办理授权函》下载 ）</a></span>
          </a-form-item>
        </div>
      </a-card>


      <!-- 具名插槽： 可填充自定义字段 -->
      <slot name="step1Item" />
    </a-form>

    <!-- 2. 录入经营信息  -->
    <a-divider v-if="props.showStyle == showStyleEnum.block" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">录入经营信息</a-divider>
    <a-form
      v-show="props.showStyle == showStyleEnum.block || vdata.currentStep == 2"
      ref="stepForm2Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step2Rules"
    >
      <a-form-item v-if="vdata.hideItem.indexOf('mchShortName') < 0 " label="商户简称" name="mchShortName">
        <a-input v-model:value="applymentDetailInfo.mchShortName" :readonly="isView" />
        <span v-if="configMode != 'divsionMode' " class="jeepay-tip-text">微信付款时会显示该名字，进件后不可以修改</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('licenseImg') < 0 " label="营业执照照片" name="licenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.licenseImg" bizType="applyment" ocrType="license" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 商户名称、 营业执照编号)</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('mchFullName') < 0 " label="商户名称全称" name="mchFullName">
        <a-input v-model:value="applymentDetailInfo.mchFullName" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('licenseNo') < 0 " label="营业执照编号" name="licenseNo">
        <a-input v-model:value="applymentDetailInfo.licenseNo" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('licenseEffectBegin') < 0 " label="营业执照起始有效期" name="licenseEffectBegin">
        <a-input v-model:value="applymentDetailInfo.licenseEffectBegin" :readonly="isView" />
      </a-form-item>


      <a-form-item v-if="vdata.hideItem.indexOf('licenseEffectEnd') < 0 " class="jeepay-valid" label="营业执照有效期截止" name="licenseEffectEnd">
        <a-input v-model:value="applymentDetailInfo.licenseEffectEnd" :readonly="isView" :disabled="applymentDetailInfo.licenseEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :disabled="isView" :checked="applymentDetailInfo.licenseEffectEnd == '长期' " @change="(e: any) => applymentDetailInfo.licenseEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>


      <a-form-item v-if="vdata.hideItem.indexOf('address') < 0 " label="商户详细地址" name="address">
        <a-input v-model:value="applymentDetailInfo.address" :readonly="isView" />
        <span class="jeepay-tip-text">请填写详细的商户地址，如xx市xx路xx号xx楼宇</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('areaCode') < 0 " label="商户地理位置选择省市县" name="areaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.areaCode" :disabled="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('storeOuterImg') < 0 " label="门头照" name="storeOuterImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeOuterImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('storeCashierImg') < 0 " label="收银台照片" name="storeCashierImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeCashierImg" bizType="applyment" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('storeInnerImg') < 0 " label="店内环境照" name="storeInnerImg">
        <JeepayUpload v-model:src="applymentDetailInfo.storeInnerImg" bizType="applyment" />
      </a-form-item>

      <!-- 具名插槽： 可填充自定义字段 -->
      <slot name="step2Item" />
    </a-form>

    <!-- 3. 上传经营证件  -->
    <a-divider v-if="props.showStyle == showStyleEnum.block" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">上传经营证件</a-divider>
    <a-form
      v-show="props.showStyle == showStyleEnum.block || vdata.currentStep == 3"
      ref="stepForm3Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step3Rules"
    >
      <a-form-item v-if="vdata.hideItem.indexOf('idcard1Img') < 0 " label="法人身份证人像面照片" name="idcard1Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcard2Img') < 0 " label="法人身份证国徽面照片" name="idcard2Img">
        <JeepayUpload v-model:src="applymentDetailInfo.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanFunc" />
        <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardName') < 0 " label="法人身份证姓名" name="idcardName">
        <a-input v-model:value="applymentDetailInfo.idcardName" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardNo') < 0 " label="法人身份证号" name="idcardNo">
        <a-input v-model:value="applymentDetailInfo.idcardNo" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardEffectBegin') < 0 " label="法人身份证起始有效期" name="idcardEffectBegin">
        <a-input v-model:value="applymentDetailInfo.idcardEffectBegin" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardEffectEnd') < 0 " class="jeepay-valid" label="法人身份证结束有效期" name="idcardEffectEnd">
        <a-input v-model:value="applymentDetailInfo.idcardEffectEnd" :readonly="isView" :disabled="applymentDetailInfo.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
        <a-checkbox :disabled="isView" :checked="applymentDetailInfo.idcardEffectEnd == '长期' " @change="(e : any) => applymentDetailInfo.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardAddress') < 0 " label="法人身份证居住地址" name="idcardAddress">
        <a-input v-model:value="applymentDetailInfo.idcardAddress" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('idcardInHandImg') < 0 " label="法人手持身份证照片" name="idcardInHandImg">
        <JeepayUpload v-model:src="applymentDetailInfo.idcardInHandImg" bizType="applyment" />
      </a-form-item>


      <template v-if="applymentDetailInfo.merchantType == '3'">
        <a-button
          class="jeepay-m-btn"
          data-type="text"
          style="margin-left:35px"
          size="small"
          type="primary"
          @click="addCompanyBeneficiaryListFunc"
        >
          <plus-outlined />新增企业受益人卡片
        </a-button>
      </template>

      <template v-if="applymentDetailInfo.companyBeneficiaryList">
        <a-card v-for="(item, i) in applymentDetailInfo.companyBeneficiaryList" :key="i" class="jeepay-card-sheng" style="padding: 20px; margin:35px;">
          <template #title>
            <div style="display:flex;justify-content: space-between; flex-wrap: wrap;">
              <span>企业受益人信息[{{ i+1 }}]</span>
              <div>
                <a-button
                  class="jeepay-m-btn"
                  data-type="text"
                  style="margin-right:20px"
                  size="small"
                  type="primary"
                  @click="useBizCompanyBeneficiaryFunc(i)"
                >
                  <partition-outlined />设置法人为受益人
                </a-button>
                <template v-if="applymentDetailInfo.companyBeneficiaryList.length > 1">
                  <a-button class="jeepay-m-btn" data-type="text" size="small" type="danger" @click="delCompanyBeneficiaryListFunc(i)"><delete-outlined />删除该企业受益人卡片</a-button>
                </template>
              </div>
            </div>
          </template>


          <div style="padding-top:20px">
            <a-form-item label="受益人身份证人像面照片" :name="`companyBeneficiaryListIdcard1Img_${i}`">
              <JeepayUpload v-model:src="item.idcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
            </a-form-item>

            <a-form-item label="受益人身份证国徽面照片" :name="`companyBeneficiaryListIdcard2Img_${i}`">
              <JeepayUpload v-model:src="item.idcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="(o) => ocrScanFuncByCompanyBeneficiary(o, i)" />
              <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
            </a-form-item>

            <a-form-item label="受益人身份证姓名" :name="`companyBeneficiaryListIdcardName_${i}`">
              <a-input v-model:value="item.idcardName" :readonly="isView" />
            </a-form-item>

            <a-form-item label="受益人身份证号" :name="`companyBeneficiaryListIdcardNo_${i}`">
              <a-input v-model:value="item.idcardNo" :readonly="isView" />
            </a-form-item>

            <a-form-item label="受益人身份证起始有效期" :name="`companyBeneficiaryListIdcardEffectBegin_${i}`">
              <a-input v-model:value="item.idcardEffectBegin" :readonly="isView" />
            </a-form-item>

            <a-form-item class="jeepay-valid" label="受益人身份证结束有效期" :name="`companyBeneficiaryListIdcardEffectEnd_${i}`">
              <a-input v-model:value="item.idcardEffectEnd" :readonly="isView" :disabled="item.idcardEffectEnd == '长期'" style="width: 150px;margin-right: 10px;" />
              <a-checkbox :disabled="isView" :checked="item.idcardEffectEnd == '长期' " @change="(e : any) => item.idcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
            </a-form-item>

            <a-form-item label="受益人身份证居住地址" :name="`companyBeneficiaryListIdcardAddress_${i}`">
              <a-input v-model:value="item.idcardAddress" :readonly="isView" />
            </a-form-item>
          </div>
        </a-card>
      </template>
      

      <!-- 具名插槽： 可填充自定义字段 -->
      <slot name="step3Item" />
    </a-form>

    <!-- 4. 填写结算账号  -->
    <a-divider v-if="props.showStyle == showStyleEnum.block" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">填写结算账号</a-divider>
    <a-form
      v-show="props.showStyle == showStyleEnum.block || vdata.currentStep == 4"
      ref="stepForm4Ref"
      style="margin-top: 20px;"
      :model="applymentDetailInfo"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 8 }"
      :rules="vdata.step4Rules"
    >
      <a-form-item v-if="vdata.hideItem.indexOf('settAccountType') < 0 " label="结算账号类型" name="settAccountType">
        <a-radio-group v-model:value="applymentDetailInfo.settAccountType" :disabled="isView || vdata.disabledItem.indexOf('settAccountType') >= 0" @change="changeEvent.settAccountTypeChange(vdata)">
          <a-radio value="C">对私</a-radio>
          <a-radio value="B">对公</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountLicenseImg') < 0 " :label="applymentDetailInfo.settAccountType == 'B' ? '开户许可证照片' : '结算银行卡照片'" name="settAccountLicenseImg">
        <JeepayUpload v-model:src="applymentDetailInfo.settAccountLicenseImg" bizType="applyment" ocrType="bankCard" @ocrScan="ocrScanBySettAccountBankCardFunc" />
        <span class="jeepay-tip-text">(上传图片自动银行卡号)</span>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountName') < 0 " :label="applymentDetailInfo.settAccountType == 'B' ? '对公账户名称' : '持卡人姓名'" name="settAccountName">
        <a-input v-model:value="applymentDetailInfo.settAccountName" :readonly="isView" style="width: 60%; margin-right: 10px;" />
        <a-button
          v-if="applymentDetailInfo.settAccountType == 'C'"
          class="jeepay-m-btn"
          data-type="text"
          size="small"
          type="primary"
          @click="applymentDetailInfo.settAccountName = applymentDetailInfo.idcardName"
        >
          <bulb-outlined />录入法人姓名
        </a-button>
        <a-button
          v-if="applymentDetailInfo.settAccountType == 'B'"
          class="jeepay-m-btn"
          data-type="text"
          size="small"
          type="primary"
          @click="applymentDetailInfo.settAccountName = applymentDetailInfo.mchFullName"
        >
          <bulb-outlined />录入企业名称
        </a-button>
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountNo') < 0 " :label="applymentDetailInfo.settAccountType == 'B' ? '对公账号' : '银行卡号'" name="settAccountNo">
        <a-input v-model:value="applymentDetailInfo.settAccountNo" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountBankName') < 0 " label="开户银行" name="settAccountBankName">
        <JeepayBankCodeSelect v-model:value="applymentDetailInfo.settAccountBankName" :readonly="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountBankBranchAreaCode') < 0 " label="开户银行支行所在地区编码" name="settAccountBankBranchAreaCode">
        <JeepayAreaSelect v-model:value="applymentDetailInfo.settAccountBankBranchAreaCode" :disabled="isView" />
      </a-form-item>

      <a-form-item v-if="vdata.hideItem.indexOf('settAccountBankBranchName') < 0 " label="开户银行支行名称" name="settAccountBankBranchName">
        <a-input v-model:value="applymentDetailInfo.settAccountBankBranchName" :readonly="isView" />
      </a-form-item>


      <!-- 企业性质 && 对私结算 && 结算到非法人银行卡时 需要传以下信息 -->
      <template v-if="(applymentDetailInfo.merchantType == 2 || applymentDetailInfo.merchantType == 3 ) && applymentDetailInfo.settAccountType == 'C' && applymentDetailInfo.settAccountName != applymentDetailInfo.idcardName ">
        <a-card class="jeepay-card-sheng" title="企业或个体工商户结算到非法人银行卡，需要传入结算账户的持卡人认证信息" style="padding: 20px; margin-left:25px">
          <br>
          <a-form-item v-if="vdata.hideItem.indexOf('settAccountIdcardNo') < 0 " :label="'持卡人' + (applymentDetailInfo.settAccountName ? `(${applymentDetailInfo.settAccountName})` : '' ) + '身份证号' " name="settAccountIdcardNo">
            <a-input v-model:value="applymentDetailInfo.settAccountIdcardNo" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('settAccountIdcard1Img') < 0 " :label="'持卡人' + (applymentDetailInfo.settAccountName ? `(${applymentDetailInfo.settAccountName})` : '' ) + '身份证人像照' " name="settAccountIdcard1Img">
            <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard1Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 身份证名称 身份证号)</span>
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('settAccountIdcard2Img') < 0 " :label="'持卡人' + (applymentDetailInfo.settAccountName ? `(${applymentDetailInfo.settAccountName})` : '' ) + '身份证国徽面照片' " name="settAccountIdcard2Img">
            <JeepayUpload v-model:src="applymentDetailInfo.settAccountIdcard2Img" bizType="applyment" ocrType="idCard" @ocrScan="ocrScanBySettAccountFunc" />
            <span class="jeepay-tip-text">(上传图片自动识别 有效期)</span>
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('settAccountIdcardEffectBegin') < 0 " :label="'持卡人' + (applymentDetailInfo.settAccountName ? `(${applymentDetailInfo.settAccountName})` : '' ) + '身份证起始有效期' " name="settAccountIdcardEffectBegin">
            <a-input v-model:value="applymentDetailInfo.settAccountIdcardEffectBegin" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('settAccountIdcardEffectEnd') < 0 " :label="'持卡人' + (applymentDetailInfo.settAccountName ? `(${applymentDetailInfo.settAccountName})` : '' ) + '身份证结束有效期' " name="settAccountIdcardEffectEnd">
            <a-input v-model:value="applymentDetailInfo.settAccountIdcardEffectEnd" :readonly="isView" :disabled="applymentDetailInfo.settAccountIdcardEffectEnd == '长期'" style="width: 150px; margin-right:10px;" />
            <a-checkbox :disabled="isView" :checked="applymentDetailInfo.settAccountIdcardEffectEnd == '长期' " @change="(e : any) => applymentDetailInfo.settAccountIdcardEffectEnd = e.target.checked ? '长期' : '' ">长期</a-checkbox>
          </a-form-item>
        </a-card>
      </template>


      <!-- 企业类型 && 结算到个人 -->
      <template v-if="applymentDetailInfo.merchantType == 3 && applymentDetailInfo.settAccountType == 'C' ">
        <br>
        <a-card class="jeepay-card-sheng" title="企业结算到个人需要录入以下验证信息" style="padding: 20px; margin-left:25px">
          <br>
          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountName') < 0 " label="对公账户名称" name="companyAccountName">
            <a-input v-model:value="applymentDetailInfo.companyAccountName" :readonly="isView" />
            <span class="jeepay-tip-text">对公账户信息仅用作验证， 不作为结算账号</span>
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountNo') < 0 " label="对公账户银行卡号" name="companyAccountNo">
            <a-input v-model:value="applymentDetailInfo.companyAccountNo" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankName') < 0 " label="对公账户开户银行名称" name="companyAccountBankName">
            <JeepayBankCodeSelect v-model:value="applymentDetailInfo.companyAccountBankName" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankBranchAreaCode') < 0 " label="对公账户开户支行所在地区编码" name="companyAccountBankBranchAreaCode">
            <JeepayAreaSelect v-model:value="applymentDetailInfo.companyAccountBankBranchAreaCode" :disabled="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankBranchName') < 0 " label="对公账户开户支行名称" name="companyAccountBankBranchName">
            <a-input v-model:value="applymentDetailInfo.companyAccountBankBranchName" :readonly="isView" />
          </a-form-item>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountLicenseImg') < 0 " label="开户许可证照片" name="companyAccountLicenseImg">
            <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
          </a-form-item>
        </a-card>
      </template>


      <!-- 个体户类型 && 结算到个人  && 非法人卡 -->
      <template v-if="applymentDetailInfo.merchantType == 2 && applymentDetailInfo.settAccountType == 'C' && applymentDetailInfo.settAccountName != applymentDetailInfo.idcardName ">
        <br>
        <a-card class="jeepay-card-sheng" title="个体户对私结算到非法人银行卡，需要录入以下验证信息(验证信息，不作为结算账号)" style="margin-left:25px">
          <br>

          <a-form-item v-if="vdata.hideItem.indexOf('companyAccountType') < 0 " name="companyAccountType" label="选择认证类型">
            <a-radio-group v-model:value="applymentDetailInfo.companyAccountType" :disabled="isView || vdata.disabledItem.indexOf('companyAccountType') >= 0" @change="changeEvent.companyAccountType(vdata)">
              <a-radio value="C">法人银行卡</a-radio>
              <a-radio value="B">个体户对公账户</a-radio>
            </a-radio-group>
          </a-form-item>

          <!-- 认证信息是对公对公  -->
          <template v-if="applymentDetailInfo.companyAccountType == 'B'">
            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountName') < 0 " label="对公账户名称" name="companyAccountName">
              <a-input v-model:value="applymentDetailInfo.companyAccountName" :readonly="isView" />
              <span class="jeepay-tip-text">对公账户信息仅用作验证， 不作为结算账号</span>
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountNo') < 0 " label="对公账户银行卡号" name="companyAccountNo">
              <a-input v-model:value="applymentDetailInfo.companyAccountNo" :readonly="isView" />
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankName') < 0 " label="对公账户开户银行名称" name="companyAccountBankName">
              <JeepayBankCodeSelect v-model:value="applymentDetailInfo.companyAccountBankName" :readonly="isView" />
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankBranchAreaCode') < 0 " label="对公账户开户支行所在地区编码" name="companyAccountBankBranchAreaCode">
              <JeepayAreaSelect v-model:value="applymentDetailInfo.companyAccountBankBranchAreaCode" :disabled="isView" />
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountBankBranchName') < 0 " label="对公账户开户支行名称" name="companyAccountBankBranchName">
              <a-input v-model:value="applymentDetailInfo.companyAccountBankBranchName" :readonly="isView" />
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountLicenseImg') < 0 " label="开户许可证照片" name="companyAccountLicenseImg">
              <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
            </a-form-item>
          </template>

          <!-- 认证信息是对公对私  -->
          <template v-if="applymentDetailInfo.companyAccountType == 'C'">
            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountName') < 0 " label="法人银行卡账号" name="companyAccountName">
              <p>
                <a-input v-model:value="applymentDetailInfo.companyAccountName" style="width:200px; margin-right: 10px;" :disabled="true" :readonly="isView" />
                <a-button size="small" type="primary" @click="applymentDetailInfo.companyAccountName = applymentDetailInfo.idcardName"><bulb-outlined />录入法人姓名</a-button>
              </p>
              <span class="jeepay-tip-text">认证银行卡持卡人姓名必须和法人名称一致</span>
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountNo') < 0 " label="银行卡号" name="companyAccountNo">
              <a-input v-model:value="applymentDetailInfo.companyAccountNo" :readonly="isView" />
            </a-form-item>

            <a-form-item v-if="vdata.hideItem.indexOf('companyAccountLicenseImg') < 0 " label="银行卡照片" name="companyAccountLicenseImg">
              <JeepayUpload v-model:src="applymentDetailInfo.companyAccountLicenseImg" bizType="applyment" />
            </a-form-item>
          </template>
        </a-card>
      </template>


      <!-- 具名插槽： 可填充自定义字段 -->
      <slot name="step4Item" />
    </a-form>

    <!-- 5. 选择签约产品及费率配置  -->

    <!-- 分账模式， 将彻底不显示该模块 -->
    <template v-if="configMode != 'divsionMode' ">
      <a-divider v-if="props.showStyle == showStyleEnum.block" class="jeepay-m-divider" orientation="left" style="color: #1A66FF;">选择签约产品及费率配置</a-divider>
      <a-form
        v-show="props.showStyle == showStyleEnum.block || vdata.currentStep == 5"
        ref="stepForm5Ref"
        style="margin-top: 20px;"
        :model="applymentDetailInfo"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 10 }"
        :rules="vdata.step5Rules"
      >
        <div v-if="vdata.hideItem.indexOf('paywayFeeList') < 0">
          <JeepayPaywayRatePanel 
            ref="jeepayPaywayRatePanelRef" 
            :configMode="configMode"
            :infoId=" (mchApplymentData.applyId || '') + '_' + mchApplymentData.mchNo" 
            :selectIfCode="mchApplymentData.ifCode" 
            onlyRate="true"
          />
        </div>

        <!-- 具名插槽： 可填充自定义字段 -->
        <slot name="step5Item" />
      </a-form>
    </template>
    <div style="text-align: center;">
      <a-button v-show="props.showStyle == showStyleEnum.step && vdata.currentStep > 1" type="primary" @click="toPrevStep"><left-circle-outlined /> 上一步 </a-button>
      &nbsp;&nbsp;
      <a-button v-show="props.showStyle == showStyleEnum.step && vdata.currentStep < 5" type="primary" @click="toNextStep">下一步 <right-circle-outlined /> </a-button>
      &nbsp;&nbsp;
    </div>
  </div>
</template>

<script setup lang="ts">

import {ref, reactive, getCurrentInstance, defineProps, onMounted, inject} from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'

// 获取当前实例的代理对象
const { proxy } : any = getCurrentInstance()

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties

const jeepayPaywayRatePanelRef = ref()

// 显示类型枚举值
const showStyleEnum = {
  step: 'step',
  block: 'block'
}

// 响应式数据
const vdata : any = reactive({

  isTempData: false, // 是否保存草稿

  currentStep: 1,
  step1Rules: {
                merchantType: [ ruleGenerator.requiredSelect('商户类型', 'number') ],
                mccCode: [ ruleGenerator.requiredSelect('行业') ],
                loginAccount: [ ruleGenerator.requiredInput('注册账号'), { validator: (rule, value) => {
                  if(ruleGenerator.mobile.pattern.test(value) || ruleGenerator.emall.pattern.test(value)){
                    return Promise.resolve()
                  }
                  return Promise.reject('请输入手机号或邮箱')
                } } ],
                contactName: [ ruleGenerator.requiredInput('联系人姓名') ],
                contactPhone: [ ruleGenerator.requiredInput('联系人电话'), ruleGenerator.mobile ],
                contactEmail: [ ruleGenerator.requiredInput('联系人邮箱'), ruleGenerator.emall ],

                contactIdcard1Img: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],
                contactIdcard2Img: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],
                contactIdcardNo: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],
                contactIdcardEffectBegin: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],
                contactIdcardEffectEnd: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],
                contactIdcardAddress: [{ validator: (rule, value) => companyContactNameIdCardNameRulesFunc(rule, value) }],

              },
  step2Rules: {
                mchShortName: [ ruleGenerator.requiredInput('简称') ],
                mchFullName: [ ruleGenerator.requiredInput('全称') ],
                areaCode: [ ruleGenerator.requiredSelect('位置编码', 'array') ],
                address: [ ruleGenerator.requiredInput('详细地址') ],
                storeOuterImg: [ ruleGenerator.requiredUpload('门头照') ],
                storeCashierImg: [ ruleGenerator.requiredUpload('收银台照片') ],
                storeInnerImg: [ ruleGenerator.requiredUpload('店内环境照片') ],
                licenseImg: [ ruleGenerator.requiredUpload('营业执照照片') ],
                licenseNo: [ ruleGenerator.requiredInput('营业执照编号') ],
                licenseEffectBegin: [ ruleGenerator.requiredInput('营业执照起始有效期'), ruleGenerator.date ],
                licenseEffectEnd: [ ruleGenerator.requiredInput('营业执照有效期截止'), ruleGenerator.dateOrForever ],

  },
  step3Rules: {

                idcardName: [ ruleGenerator.requiredInput('身份证中的姓名') ],
                idcardNo: [ ruleGenerator.requiredInput('身份证号') ],
                idcardEffectBegin: [ ruleGenerator.requiredInput('身份证起始有效期'), ruleGenerator.date ],
                idcardEffectEnd: [ ruleGenerator.requiredInput('身份证有效期截止日期'), ruleGenerator.dateOrForever ],
                idcardAddress: [ ruleGenerator.requiredInput('身份证居住地址') ],
                idcard1Img: [ ruleGenerator.requiredUpload('人像照') ],
                idcard2Img: [ ruleGenerator.requiredUpload('国徽面照') ],

                companyBeneficiaryListIdcardName_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_0: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(0, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_1: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(1, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_2: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(2, 'idcard2Img', '请上传国徽面照') } ],

                companyBeneficiaryListIdcardName_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardName', '请输入身份证中的姓名') } ],
                companyBeneficiaryListIdcardNo_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardNo', '请输入身份证号') } ],
                companyBeneficiaryListIdcardEffectBegin_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardEffectBegin', '请输入身份证起始有效期') } ],
                companyBeneficiaryListIdcardEffectEnd_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardEffectEnd', '请输入身份证有效期截止日期') } ],
                companyBeneficiaryListIdcardAddress_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcardAddress', '请输入身份证居住地址') } ],
                companyBeneficiaryListIdcard1Img_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcard1Img', '请上传人像照') } ],
                companyBeneficiaryListIdcard2Img_3: [ {required: true, validator:  (rule, value) => companyBeneficiaryRulesFunc(3, 'idcard2Img', '请上传国徽面照') } ],

               
  },
  step4Rules: {
                settAccountType: [ ruleGenerator.requiredSelect('账号类型') ],
                settAccountNo: [ ruleGenerator.requiredInput('银行卡账号') ],
                settAccountName: [ ruleGenerator.requiredInput('持卡人姓名') ],
                settAccountBankName : [ruleGenerator.requiredInput('结算银行名称')],
                settAccountBankBranchAreaCode : [ruleGenerator.requiredSelect('开户行区县编码', 'array')],
                settAccountBankBranchName : [ruleGenerator.requiredInput('结算银行卡支行名称')],

                settAccountIdcardNo: [ ruleGenerator.requiredInput('持卡人身份证号') ],
                settAccountIdcard1Img: [ ruleGenerator.requiredUpload('持卡人身份证人像照') ],
                settAccountIdcard2Img: [ ruleGenerator.requiredUpload('持卡人身份证国徽面照') ],
                settAccountIdcardEffectBegin: [ ruleGenerator.requiredInput('持卡人身份证起始有效期'), ruleGenerator.date ],
                settAccountIdcardEffectEnd: [ ruleGenerator.requiredInput('持卡人身份证有效期截止日期'), ruleGenerator.dateOrForever ],

                companyAccountType: [ ruleGenerator.requiredSelect('认证类型') ],
                companyAccountNo: [ ruleGenerator.requiredInput('对公账号') ],
                companyAccountName: [ ruleGenerator.requiredInput('对公账户名称') ],
                companyAccountBankName : [ruleGenerator.requiredInput('结算银行名称')],
                companyAccountBankBranchAreaCode : [ruleGenerator.requiredSelect('开户行区县编码', 'array')],
                companyAccountBankBranchName : [ruleGenerator.requiredInput('结算银行卡支行名称')],
                companyAccountLicenseImg : [ruleGenerator.requiredUpload('银行卡/开户许可证照片')]

  },
  step5Rules: {

  },

  hideItem: [], // 隐藏的item

  disabledItem: [], //禁用的item
  
})


// 定义传入属性
const props = defineProps({
  showStyle: {type: String, default: 'step' }, // 显示类型： step-分步,  block-整页显示

  step1Rules: { type: Object, default: () => { return {} } },
  step2Rules: { type: Object, default: () => {} },
  step3Rules: { type: Object, default: () => {} },
  step4Rules: { type: Object, default: () => {} },
  step5Rules: { type: Object, default: () => {} },
  changeEvent: { type: Object, default: () => {} }, //各种动作的监听事件集合， 包含： xxx, xxx

})


onMounted(() => {

  localhostTest()

  // 回调事件 覆写 
  changeEvent = Object.assign(changeEvent, props.changeEvent)

  // rule覆写 
  if(props.step1Rules){
    vdata.step1Rules = Object.assign(vdata.step1Rules, props.step1Rules)
  }
  if(props.step2Rules){
    vdata.step2Rules = Object.assign(vdata.step2Rules, props.step2Rules)
  }
  if(props.step3Rules){
    vdata.step3Rules = Object.assign(vdata.step3Rules, props.step3Rules)
  }
  if(props.step4Rules){
    vdata.step4Rules = Object.assign(vdata.step4Rules, props.step4Rules)
  }
  if(props.step5Rules){
    vdata.step5Rules = Object.assign(vdata.step5Rules, props.step5Rules)
  }

  allTtemChangeRenderFunc()

})

// 接收进件参数（包含 商户号， ifCode ）
let mchApplymentDataRef : any = inject('mchApplymentData')
let mchApplymentData : any = mchApplymentDataRef.value

// 接收父组件的进件详细参数
let applymentDetailInfoInject : any = inject('applymentDetailInfo')
let applymentDetailInfo : any = applymentDetailInfoInject.value

// 注入： 是否预览模式
let isView : any = inject('isView')

// 参数注入： 配置方式
let configMode : any = inject('configMode')


// 下一步
function toNextStep(){

  // 保存草稿，不验证
  if(vdata.isTempData){
    vdata.currentStep ++
    return true
  }

  // 验证是否通过
   proxy.$refs['stepForm'+vdata.currentStep+'Ref'].validate().then( () => {
        vdata.currentStep ++
   })
  
}

// 上一步
function toPrevStep(){
  vdata.currentStep --
}

// 验证所有表单
function validateAllForm(step){

  // 不存在组件时： 
  if(typeof proxy.$refs['stepForm'+step+'Ref'] == 'undefined'){
    if(step >= 5){
      return Promise.resolve()
    }else{
      return validateAllForm(++step)
    }
  }

  return proxy.$refs['stepForm'+step+'Ref'].validate().then( () => {
     if(step >= 5){
      return Promise.resolve()
     }
     return validateAllForm(++step)
     
  })
}

// 图片识别的回调函数
function ocrScanFunc(orcObject){

  if(orcObject){
    Object.assign(applymentDetailInfo, orcObject)

    // 自动填入 结算卡名称 
    if(orcObject.idcardName && applymentDetailInfo.settAccountType == 'C' && !applymentDetailInfo.settAccountName){
      applymentDetailInfo.settAccountName = orcObject.idcardName
    }

  }

}

// 图片识别的回调函数
function ocrScanBySettAccountFunc(orcObject){

  if(orcObject){
    
    if(orcObject.idcardName){
      applymentDetailInfo.settAccountIdcardName = orcObject.idcardName
    }
    if(orcObject.idcardNo){
      applymentDetailInfo.settAccountIdcardNo = orcObject.idcardNo
    }

    if(orcObject.idcardEffectBegin){
      applymentDetailInfo.settAccountIdcardEffectBegin = orcObject.idcardEffectBegin
    }

    if(orcObject.idcardEffectEnd){
      applymentDetailInfo.settAccountIdcardEffectEnd = orcObject.idcardEffectEnd
    }
  }

}

// 识别银行卡信息 
function ocrScanBySettAccountBankCardFunc(orcObject){
  if(orcObject){
     if(orcObject.settAccountNo){
      applymentDetailInfo.settAccountNo = orcObject.settAccountNo
    }
  }
}


// 点击【保存】的前置事件, 需要返回Promise对象
function saveDataPreCallback(isTemp){

  // 判断下： 是否包含该组件， 若没有该组件（比如分账模式下）， 则无需获取此费率数据
  if(jeepayPaywayRatePanelRef.value){

    // 放置费率配置项
    let paywayFeeList = jeepayPaywayRatePanelRef.value.getReqMchRatePaywayFeeList()
      if(typeof(paywayFeeList) != 'object'){
        return Promise.reject()
      }

      console.log('进件发起的费率数据：', paywayFeeList)

      if(!isTemp && paywayFeeList.length <= 0){ // 草稿不验证 
        $infoBox.message.error('请至少包含一个签约产品， 若无产品请先配置服务商相关底价信息。')
        return Promise.reject()
      }

      // 赋值到对象中
      applymentDetailInfo.reqPaywayFeeList = paywayFeeList

  }


  if(isTemp){
    return Promise.resolve()
  }

  // 验证所有表单
  return validateAllForm(1)
  .then(() => { return Promise.resolve() } )
  .catch(() => {
    $infoBox.message.error('数据填写不完整， 请检查后提交')
    return Promise.reject()
  })

}

// 点击【智能读取】后的回调事件
function mergeApplyDetailInfosCallback(){

  allTtemChangeRenderFunc()

}

// 监听事件
let changeEvent = {

  // 【选择商户类型】的监听事件
  merchantTypeChange: (vdata) => {

    // 默认   清楚隐藏项目 和 禁用类型 及其他
    removeItem(vdata.hideItem, ['licenseNo', 'licenseImg', 'licenseEffectBegin', 'licenseEffectEnd'])
    removeItem(vdata.disabledItem, ['settAccountType'])
    
    vdata.step3Rules.idcardInHandImg = [] // 手持身份证是否必填

    // 个人
    if(applymentDetailInfo.merchantType == '1'){
        vdata.hideItem.push('licenseNo', 'licenseImg', 'licenseEffectBegin', 'licenseEffectEnd')
        applymentDetailInfo.settAccountType = 'C'
        vdata.disabledItem.push('settAccountType')

        vdata.step3Rules.idcardInHandImg = [ ruleGenerator.requiredUpload('手持身份证照片') ] // 必填

        // 手动切换 结算账户类型
        changeEvent.settAccountTypeChange(vdata)

    }else if(applymentDetailInfo.merchantType == '3'){ // 企业

      // 企业类型必传 受益人
      if(!applymentDetailInfo.companyBeneficiaryList || applymentDetailInfo.companyBeneficiaryList.length == 0){
        applymentDetailInfo.companyBeneficiaryList = [{}]
      }

    }

  },

  // 【选择结算账户类型】的监听事件
  settAccountTypeChange: (vdata) => {
    
    // 默认清除项目
    removeItem(vdata.hideItem, ['settAccountBankName', 'settAccountBankBranchAreaCode', 'settAccountBankBranchName'])

    vdata.step4Rules.settAccountLicenseImg = [ ] //非必填

    // 结算账号是个人
    if(applymentDetailInfo.settAccountType == 'C'){
        vdata.hideItem.push('settAccountBankName', 'settAccountBankBranchAreaCode', 'settAccountBankBranchName')
    }else{

        vdata.step4Rules.settAccountLicenseImg = [ ruleGenerator.requiredUpload('开户许可证') ] // 必填

    }

  },

  // 切换个体户 & 非法人结算 时， 认证账户类型 
  companyAccountType(vdata){

    if(applymentDetailInfo.companyAccountType == 'C'){
      applymentDetailInfo.companyAccountName = applymentDetailInfo.idcardName
    }
    if(applymentDetailInfo.companyAccountType == 'B'){
      applymentDetailInfo.companyAccountName = applymentDetailInfo.mchFullName
    }

  }

}

function removeItem(list, removeItems){
  removeItems.forEach(element => {
    if(list.indexOf(element) >= 0){
       list.splice(vdata.hideItem.indexOf(element), 1) //删除元素
    }
  })
}

// 把所有的信息进行初始化操作
function allTtemChangeRenderFunc(){
  changeEvent.merchantTypeChange(vdata)
  changeEvent.settAccountTypeChange(vdata)
}


// 新增受益人
function addCompanyBeneficiaryListFunc(){
  
  if(!applymentDetailInfo.companyBeneficiaryList){
    applymentDetailInfo.companyBeneficiaryList = [{}]
  }else{

    if(applymentDetailInfo.companyBeneficiaryList.length >= 4){
      return $infoBox.message.error('最多新增四个企业受益人！')
    }

    applymentDetailInfo.companyBeneficiaryList.push({})
  }
  
}

// 删除受益人
function delCompanyBeneficiaryListFunc(i){
  applymentDetailInfo.companyBeneficiaryList.splice(i, 1)
}


// 图片识别的回调函数
function ocrScanFuncByCompanyBeneficiary(orcObject, i){

  if(orcObject){
    Object.assign(applymentDetailInfo.companyBeneficiaryList[i], orcObject)
  }

}


// 图片识别的回调函数
function ocrScanFuncByContact(orcObject){

  if(orcObject){
    orcObject.idcardNo && (applymentDetailInfo.contactIdcardNo = orcObject.idcardNo)
    orcObject.idcardAddress && (applymentDetailInfo.contactIdcardAddress = orcObject.idcardAddress)
    orcObject.idcardEffectBegin && (applymentDetailInfo.contactIdcardEffectBegin = orcObject.idcardEffectBegin)
    orcObject.idcardEffectEnd && (applymentDetailInfo.contactIdcardEffectEnd = orcObject.idcardEffectEnd)
  }

}


// 使用法人信息
function useBizCompanyBeneficiaryFunc(i){
  applymentDetailInfo.companyBeneficiaryList[i].idcardName = applymentDetailInfo.idcardName
  applymentDetailInfo.companyBeneficiaryList[i].idcardNo = applymentDetailInfo.idcardNo
  applymentDetailInfo.companyBeneficiaryList[i].idcard1Img = applymentDetailInfo.idcard1Img
  applymentDetailInfo.companyBeneficiaryList[i].idcard2Img = applymentDetailInfo.idcard2Img
  applymentDetailInfo.companyBeneficiaryList[i].idcardAddress = applymentDetailInfo.idcardAddress
  applymentDetailInfo.companyBeneficiaryList[i].idcardEffectBegin = applymentDetailInfo.idcardEffectBegin
  applymentDetailInfo.companyBeneficiaryList[i].idcardEffectEnd = applymentDetailInfo.idcardEffectEnd
}


// 自定义校验规则
function companyBeneficiaryRulesFunc(index, field, msg){

  // 不存在时不校验
  if(!applymentDetailInfo.companyBeneficiaryList || applymentDetailInfo.companyBeneficiaryList.length < 0){
    return Promise.resolve()
  }

  if(!applymentDetailInfo.companyBeneficiaryList[index][field]){
    return Promise.reject(msg)
  }

  return Promise.resolve()
}

// 判断联系人和法人是否一致， 若不一致则必填
function companyContactNameIdCardNameRulesFunc(rule, value){

  if(!value && applymentDetailInfo.contactName != applymentDetailInfo.idcardName ){
    return Promise.reject('当联系人与法人不是同一人时必填该字段')
  }
  return Promise.resolve()
}


// 获取到所有的请求集合
function hasApplymentWaycode(wayCode){
  if(!jeepayPaywayRatePanelRef.value){
    return false
  }
  return jeepayPaywayRatePanelRef.value.hasApplymentWaycode(wayCode)
}


// 本次测试
function localhostTest(){


  // !!! 本次测试在放开 ！！！ 注意！！ 不要提交 ！！！！ 
  if(true){
    return false 
  }


  if(typeof applymentDetailInfo.merchantType == 'undefined'){

    let nowTime = new Date().getTime()

    let testObject = 
  
  {
    'isDivision': 1,
    'merchantType': 2,
    'mccCode': '5812',
    'contactName': '张三',
    'contactPhone': '13800138001',
    'contactEmail': '123123@qq.com',
    'mchShortName': '商户简称_' + nowTime,
    'licenseImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'mchFullName': '商户全称_' + nowTime,
    'licenseNo': '911200001088888888',
    'licenseEffectBegin': '2020-01-01',
    'licenseEffectEnd': '长期',
    'address': '天津市滨海高新区测试公司地址1号',
    'areaCode': [
        '110000',
        '110100',
        '110101'
    ],
    'storeOuterImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'storeCashierImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'storeInnerImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'idcard1Img': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'idcard2Img': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'idcardName': '张三',
    'idcardNo': '500383198404252135',
    'idcardEffectBegin': '2021-11-11',
    'idcardEffectEnd': '长期',
    'idcardAddress': '天津市滨海高新区测试地址身份证1号',
    'idcardInHandImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'settAccountType': 'C',
    'settAccountLicenseImg': 'https://jeepaypublic.oss-cn-beijing.aliyuncs.com/applyment/4f0f1ae8-d3e5-46b0-a75e-7d49b31827b1.jpg',
    'settAccountName': '张三',
    'settAccountNo': '621200001088888888',
    'divisionFeeRate': 0.001,
}
    Object.assign(applymentDetailInfo, testObject)
  }


}


defineExpose({ saveDataPreCallback, mergeApplyDetailInfosCallback, hasApplymentWaycode })


</script>

<style lang="less" scoped>
.jeepay-tip-text{
  font-size: 10px; color: rebeccapurple
}
</style>